<template>
  <UniversalContainer name="默认Dialog" :paramaters="type">
    <Button @click="toggle">toggle</Button>
    <Dialog
      :visible="x"
      :closeOnClickOverlay="true"
      :ok="f1"
      :cancel="f2"
      @changeVisible="toggle1"
    >
      <template v-slot:content>
        <div>副标题文字</div>
        <div>提示信息文字</div>
      </template>
      <template v-slot:title>
        <strong>加粗的标题</strong>
      </template>
    </Dialog>
  </UniversalContainer>
</template>

<script setup lang="ts">
import { ref } from "vue";

import Button from "../../baseComponent/Button.vue";
import Dialog from "../../baseComponent/Dialog.vue";
import UniversalContainer from "../UniversalContainer.vue";

const x = ref(false);
const toggle = () => {
  x.value = !x.value;
};
const toggle1 = () => {
  x.value = false;
};
const f1 = () => {
  alert("this is OK function");
  return false;
};
const f2 = () => {
  alert("this is cancel function");
};
const type = ref(
  `
   import DialogContainer from "./DialogContainer.vue"\n
   <Button @click="toggle">toggle</Button>
    <Dialog
      :visible="x"
      :closeOnClickOverlay="true"
      :ok="f1"
      :cancel="f2"
      @changeVisible="toggle1"
    >
      <template v-slot:content>
        <div>副标题文字</div>
        <div>提示信息文字</div>
      </template>
      <template v-slot:title>
        <strong>加粗的标题</strong>
      </template>
    </Dialog>
  </DialogContainer>

  const x = ref(false);
  const toggle = () => {
    x.value = !x.value;
  };
  const toggle1 = () => {
    x.value = false;
  };
  const f1 = () => {
    alert("this is OK function");
    return false;
  };
  const f2 = () => {
    alert("this is cancel function");
  };
  `
);
</script>

<style scoped lang="scss"></style>
